<template>
<div>
<!-- 面包屑 -->
 <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>商品管理</el-breadcrumb-item>
  <el-breadcrumb-item>参数列表</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片视图 -->
<el-card>
<!-- 警告区域 -->
<el-alert
    title="注意：只允许为三级分类设置相关参数"
    type="warning"
    show-icon
    :closable="false">
  </el-alert>
  <!-- 级联选择器 -->
<el-row class="cat_opt">
    <el-col>
        <span>选择分类: </span>
         <el-cascader
    v-model="selectedCateKeys"
    :options="cateList"
    :props="props"
    @change="handleChange"></el-cascader>
    </el-col>
</el-row>
<!-- tab 页签区域 -->
 <el-tabs v-model="activeName" @tab-click="handleTabClick">
<!-- 添加动态参数   -->
    <el-tab-pane label="动态参数" name="many">
        <el-button type="primary" size="mini" :disabled="isBtnDisbled" @click="addDialogVisible=true">添加参数</el-button>
        <!-- 动态参数表格 -->
        <el-table :data="manyTableData" border stript>
            <!-- 展开列 -->
            <el-table-column type="expand">
                <template slot-scope="scope">
                    <!-- 选题展开行 -->
                <el-tag v-for="(item,i) in scope.row.attr_vals" :key="i" closable @close="handleClosed(i,scope.row)">{{item}}</el-tag>

                <!-- 输入文本框 -->
            <el-input
            class="input-new-tag"
            v-if="scope.row.inputVisible"
            v-model="scope.row.inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm(scope.row)"
            @blur="handleInputConfirm(scope.row)"
            >
        </el-input>
        <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
                </template>
            </el-table-column>
            <!-- 索引列 -->
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column label="参数名称" prop="attr_name"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                <el-button type="primary" size="mini" class="el-icon-edit" @click="showEditDialog(scope.row.attr_id)">编辑</el-button>
                <el-button type="danger" size="mini" class="el-icon-delete" @click="removeParams(scope.row.attr_id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-tab-pane>
<!-- 添加静态属性   -->
    <el-tab-pane label="静态属性" name="only">
        <el-button type="primary" size="mini" :disabled="isBtnDisbled" @click="addDialogVisible=true">添加属性</el-button>
        <!-- 静态属性表格 -->
            <el-table :data="onlyTableData" border stript>
            <!-- 展开列 -->
            <el-table-column type="expand">
                <template slot-scope="scope">
                    <!-- 渲染tag标签 -->
                <el-tag v-for="(item,i) in scope.row.attr_vals" :key="i" closable @close="handleClosed(i,scope.row)">{{item}}</el-tag>
                <!-- 输入文本框 -->
            <el-input
            class="input-new-tag"
            v-if="scope.row.inputVisible"
            v-model="scope.row.inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm(scope.row)"
            @blur="handleInputConfirm(scope.row)"
            >
        </el-input>
        <el-button v-else class="button-new-tag" size="small"   @click="showInput(scope.row)">+ New Tag</el-button>
        </template>

            </el-table-column>
            <!-- 索引列 -->
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column label="属性名称" prop="attr_name"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" class="el-icon-edit" @click="showEditDialog(scope.row.attr_id)">编辑</el-button>
                <el-button type="danger" size="mini" class="el-icon-delete" @click="removeParams(scope.row.attr_id)">删除</el-button>
                </template>
            
            </el-table-column>
        </el-table>
    </el-tab-pane>
  </el-tabs>
</el-card>
<!-- 添加参数对话框 -->
<el-dialog
  :title="'添加' + titleText"
  :visible.sync="addDialogVisible"
  width="50%" @close="addDialogClosed"
  >
  <!-- 表单区域 -->
 <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px" >
  <el-form-item :label="titleText" prop="attr_name">
    <el-input v-model="addForm.attr_name"></el-input>
  </el-form-item>
 </el-form>
 <!-- 按钮区域 -->
  <span slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addParams">确 定</el-button>
  </span>
</el-dialog>
<!-- 修改参数对话框 -->
<el-dialog
  :title="'修改' + titleText"
  :visible.sync="editDialogVisible"
  width="50%" @close="editDialogClosed"
  >
  <!-- 表单区域 -->
 <el-form :model="editForm" :rules="editFormRules"      ref="editFormRef" label-width="100px" >
  <el-form-item :label="titleText" prop="attr_name">
    <el-input v-model="editForm.attr_name"></el-input>
  </el-form-item>
 </el-form>
 <!-- 按钮区域 -->
  <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editParams">确 定</el-button>
  </span>
</el-dialog>
</div>
</template>
<script>
export default {
    data(){
        return {
         cateList:[],
         //级联选择器选中的内容
         selectedCateKeys:[],
         //级联选择器的配置对象
         props:{
             expandTrigger:'hover',

             label:'cat_name',
             value:'cat_id',
             children:'children'
         },
         //tabs选中项
         activeName:'many',
        //  动态参数列表
         manyTableData:[],
        //静态属性列表
         onlyTableData:[],
        // 控制对话框状态
        addDialogVisible:false,
        //添加表单对象
        addForm:{
            attr_name:''
        },
        //添加表单验证规则
        addFormRules:{
            attr_name:[
                { required: true, message: '请输入内容', trigger: 'blur' }
            ]
        },
        // 控制对话框状态
        editDialogVisible:false,
        //修改表单对象
        editForm:{
            attr_name:''
        },
        //修改表单验证规则
        editFormRules:{
            attr_name:[
                { required: true, message: '请输入内容', trigger: 'blur' }
            ]
        },
        //控制文本框显示与隐藏
        inputVisible:false,
        //文本框内容
        inputValue:''
        

        
        }
    },
    methods:{
    async getCateList(){
     let {data:res}= await this.$http.get('categories')

     if(res.meta.status !==200){
     return this.$message.error('获取分类失败')
        }
        this.cateList=res.data
    },
  //级联选择框事件
     handleChange(){
       this.getParamsData()  
     },
      //级联选择框点击事件
    handleTabClick(){
         this.getParamsData()
    // console.log(this.activeName);
    },
    async getParamsData(){
          //当不是三级分类
        if(this.selectedCateKeys.length !==3){
            this.selectedCateKeys=[]
            this.manyTableData=[]
            this.onlyTableData=[]
            return
        }
        let cateId= this.selectedCateKeys[2]
       let {data:res}= await this.$http.get(`categories/${cateId}/attributes`,{
           params:{
               sel:this.activeName   
           }
       })
        if(res.meta.status !==200){
        return this.$message.error('获取数据失败')
        }
        res.data.forEach(item=>{
            item.attr_vals= item.attr_vals? item.attr_vals.split(' '):[]
            //控制input与btn的组件显示切换
            item.inputVisible=false
            //input组件
            item.inputValue=''
        })
        console.log(res.data); 
        if(this.activeName=='many'){
            this.manyTableData=res.data
        }else{
             this.onlyTableData=res.data
        }
    },
    //添加对话框关闭时间
    addDialogClosed(){
        this.$refs.addFormRef.resetFields()
    },
    //添加参数
    addParams(){
        this.$refs.addFormRef.validate( async valid=>{
            if(!valid) return
            let cateId= this.selectedCateKeys[2]
            let {data:res}= await this.$http.post(`categories/${cateId}/attributes`,{
                attr_name:this.addForm.attr_name,
                attr_sel:this.activeName
            })
            
             if(res.meta.status !==201){
          return this.$message.error('添加参数失败')
         }
         this.$message.success('添加参数成功')
         this.getParamsData()
         this.addDialogVisible=false
        })
    },
    // 点击按钮展示修改对话框
    async showEditDialog(attr_Id){
        //获取要展示的数据
        // console.log(attr_Id);
        
     let {data:res}= await this.$http.get(`categories/${this.cateId}/attributes/${attr_Id}`,{
        params:{
            attr_sel:this.activeName
        }
      })
     if(res.meta.status !==200){
       return this.$message.error('获取参数失败')
         }
         this.editForm=res.data
       this.editDialogVisible=true
    },
    //修改对话框确定按钮点击事件
    editParams(){
     this.$refs.editFormRef.validate( async valid=>{
            if(!valid) return
            let {data:res}= await this.$http.put(`categories/${this.cateId}/attributes/${this.editForm.attr_id}`,{
                attr_name:this.editForm.attr_name,
                attr_sel:this.activeName
            })
            
             if(res.meta.status !==200){
          return this.$message.error('修改参数失败')
         }
         this.$message.success('修改参数成功')
         this.getParamsData()
         this.editDialogVisible=false
         })
    },
    //修改对话框关闭
    editDialogClosed(){
        this.$refs.editFormRef.resetFields()
    },
    //删除分类
    async removeParams(attr_id){
     const confirmResult= await this.$confirm('此操作将永久删除该参数, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err)
        
        if(confirmResult !=='confirm') {
          return this.$message.error('取消了删除')
        }
        //发送删除请求
      let {data:res}= await this.$http.delete(`categories/${this.cateId}/attributes/${attr_id}`)
         if(res.meta.status !==200)return this.$message.error('删除失败')
         this.$message.success('删除成功')
         this.getParamsData()
    },
    // 文本框失去焦点 或点击都会触发
    async handleInputConfirm(row){
        if(row.inputValue.trim().length==0){
            row.inputValue=''
            row.inputVisible=false
            return//终止后续代码执行
        }
     //当input内容不为空时发送请求
            row.attr_vals.push(row.inputValue.trim())
            row.inputValue=''
            row.inputVisible=false
     //发送请求修改参数
             this.saveAttrVals(row)
          
    },
    // btn组件
    showInput(row){
        row.inputVisible=true
        //让文本框自动获取焦点$nextTick当页面被重新渲染后调用内部代码
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
    },
    //删除参数
    handleClosed(i,row){
     row.attr_vals.splice(i,1)
     this.saveAttrVals(row)
    },
    //修改参数
    async saveAttrVals(row){
      let {data:res}= await this.$http.put(`categories/${this.cateId}/attributes/${row.attr_id}`,{
                attr_name:row.attr_name,
                attr_sel:row.attr_sel,
                attr_vals:row.attr_vals.join(' ')
            })
            if(res.meta.status !==200){
             return this.$message.error('修改参数失败')
         }
         this.$message.success('修改参数成功')
    }
},
    created(){
     // 获取级联选择框的参数
     this.getCateList()
    },
    computed:{
        // 控制添加参数 与添加属性的可用状态
        isBtnDisbled(){
            if(this.selectedCateKeys.length==3){
                return false
            }
             return true
        },
        // 获取三级分类的id
        cateId(){
            if(this.selectedCateKeys.length==3){
                return this.selectedCateKeys[2]
            }
            return null
        },

        titleText(){
            if(this.activeName==='many'){
                return '动态参数'
            }
                 return '静态属性'
            

        }
    }
    
    }
</script>
<style lang="less" scoped>
    .cat_opt {
  margin: 15px 0;
}

.el-tag {
  margin: 10px;
}

.input-new-tag {
  width: 120px;
}
</style>